<template>
  <div class="Fillblanks">
    <span v-for="(item, index) in content" :key="index">
      {{ item }}
      <el-input
        v-model="node.answer[index]"
        class="input"
        type="text"
        v-if="index != content.length - 1"
        name=""
        id=""
      />
    </span>
  </div>
</template>

<script>
export default {
  props: ["node"],
  data() {
    return {
      content: [],
    };
  },
  created() {
    !this.node.content
      ? this.$set(this.node, "content", "请输入横向填空$input内容")
      : null;
    if (!this.node.answer) {
      for (let i = 0; i < this.node.content.split("$input").length - 1; i++) {
        if (i == 0) {
          this.$set(this.node, "answer", []);
        }
        this.node.answer.push("");
      }
    }
  },
  mounted() {
    this.content = this.node.content.split("$input");
  },
  watch:{
    'node.content'(n,o){
      this.content = n.split("$input");
    }
  },
  methods: {
  },
};
</script>

<style scoped>
.input{
  display: inherit;
}
.Fillblanks .input>>>.el-input__inner {
  border: none;
  border-bottom: 1px solid black;
  border-radius: 0;
  display: inherit;
  width: 100px;
  padding: 0;
}
</style>
